<template>
  <div class="eval-btn-box">
    <van-button class="eval-btn" size="small" :class="{ selected: selected }" :disabled="disabled" @click="onBtnClick">
      <slot></slot>
    </van-button>
    <van-icon v-show="tipsContent" name="info" size="18" @click="onShowTipsContent()" />
  </div>
</template>
<script>
export default {
  name: 'EvaluateButton',
  components: {},
  props: {
    // 禁用
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // 选中
    selected: {
      type: Boolean,
      default: () => false,
    },
    // 提示内容
    tipsContent: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onBtnClick() {
      this.$emit('evalBtnClick')
    },
    onShowTipsContent() {
      this.$dialog
        .alert({
          title: '原因',
          message: this.tipsContent,
        })
        .then(() => {
          // on close
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.eval-btn-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  + .eval-btn-box {
    margin-left: px2rem(20);
  }
  .eval-btn {
    // + .eval-btn {
    //   margin-left: 80px;
    // }
    width: 98%;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
    color: #8d8d8d;
    text-align: center;
    background-color: #fff;
    &.is-disabled {
      color: #c0c4cc;
      border-color: #ebeef5;
      background-color: #fff;
    }
    &.selected {
      background-color: #0f61d5;
      border-color: #0f61d5;
      color: #fff;
      opacity: 1;
    }
  }
  .van-icon {
    margin-left: px2rem(6);
    color: #0f61d5;
  }
}
</style>
